Premium Content

HTML BASICS

Learn the fundamental structure of HTML documents

Beginner

Module 1: HTML Document Structure

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It consists of elements wrapped in tags that define the structure of your content. Every HTML document has a basic structure that the browser uses to render the page correctly.

Try It Yourself:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page.</p>
    <p>Edit this code and click "Run" to see your changes!</p>
</body>
</html>

Live Preview

Key Points:

<!DOCTYPE html> declares the document type and HTML version
<html> is the root element that wraps all content
<head> contains meta information, title, and links to resources
<body> contains all the visible content of your webpage
Tags usually come in pairs: opening <tag> and closing </tag>
The lang attribute helps with accessibility and SEO
meta charset="UTF-8" ensures proper character encoding

Premium Content

HEADINGS & TEXT

Learn to structure text content with HTML

Beginner

Module 2: Headings and Paragraphs

HTML provides six levels of headings from <h1> to <h6> to structure your content hierarchically. Paragraphs are created with the <p> tag, and you can format text with tags like <strong>, <em>, and others for emphasis and styling.

Try It Yourself:

HTML

<h1>Main Heading (Most Important)</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller Heading</h4>

<p>This is a paragraph of text. HTML ignores extra whitespace, so you need to use tags for formatting.</p>

<p>
    This paragraph contains <strong>bold text</strong>, <em>italic text</em>,
    <u>underlined text</u>, and <code>code formatting</code>.
</p>

<p>
    You can also create line breaks with <br> tags <br>
    like this!
</p>

<hr>

<p>The <hr> tag creates a horizontal rule (divider)</p>

Live Preview

Key Points:

<h1> should be used for main titles (only one per page for SEO)
Headings should be used in order (h1 > h2 > h3, etc.) for proper document structure
<p> tags automatically add spacing before and after paragraphs
Use <strong> for important text and <em> for emphasis (preferred over <b> and <i>)
<u> underlines text, while <code> displays code snippets
<br> creates line breaks (avoid overusing)
<hr> creates thematic breaks between sections

Premium Content

LINKS & IMAGES

Learn to add hyperlinks and images to your pages

Beginner

Module 3: Links and Images

The <a> tag creates hyperlinks to other pages or resources, while the <img> tag embeds images in your document. These elements are essential for creating rich, interconnected web experiences and visual content.

Try It Yourself:

HTML

<h1>Creating Links</h1>

<p>
    Visit <a href="https://www.skillmynte.com" target="_blank" rel="noopener">
        SkillMynte Official Website
    </a> to learn more!
</p>

<p>
    You can also link to <a href="#module1">Module 1</a> within this page.
</p>

<h2>Adding Images</h2>

<img src="https://via.placeholder.com/400x200" 
     alt="Example placeholder image"
     width="400"
     height="200">

<p>Images should always have alt text for accessibility.</p>

<h2>Combining Links and Images</h2>

<a href="https://www.skillmynte.com" target="_blank" rel="noopener">
    <img src="https://via.placeholder.com/200x100/04fc42/000000?text=SkillMynte+Logo" 
         alt="SkillMynte Logo"
         width="200"
         height="100">
</a>

<p>Click the image above to visit SkillMynte!</p>

Live Preview

Key Points:

The href attribute specifies the link destination (URL or fragment)
target="_blank" opens links in a new tab (use with rel="noopener" for security)
Images use the src attribute for the image source (URL or path)
The alt attribute provides alternative text for accessibility (required)
Always include width and height attributes for proper layout
You can nest images inside links to create clickable images
Use descriptive link text (avoid "click here")
For local links, use relative paths (e.g., about.html or images/photo.jpg)

Premium Content

LISTS & TABLES

Learn to organize content with lists and tables

Intermediate

Module 4: Lists and Tables

HTML supports ordered (<ol>), unordered (<ul>), and description (<dl>) lists for organizing content. Tables (<table>) are used for displaying tabular data with rows (<tr>), headers (<th>), and cells (<td>).

Try It Yourself:

HTML

<h1>HTML Lists</h1>

<h2>Unordered List (Bullet Points)</h2>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<h2>Ordered List (Numbered)</h2>
<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

<h2>Description List</h2>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

<h1>HTML Tables</h1>

<table border="1">
    <caption>Programming Languages</caption>
    <thead>
        <tr>
            <th>Language</th>
            <th>Difficulty</th>
            <th>Primary Use</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>Easy</td>
            <td>Structure</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>Medium</td>
            <td>Presentation</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Hard</td>
            <td>Behavior</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">All are essential for web development</td>
        </tr>
    </tfoot>
</table>

<p>Note: Use CSS for styling tables instead of the border attribute.</p>

Live Preview

Key Points:

Use <ul> for bullet-point lists and <ol> for numbered lists
Each list item is wrapped in <li> tags
<dl> creates description lists with terms (<dt>) and definitions (<dd>)
Tables use <tr> for rows, <th> for headers, and <td> for data cells
Structure tables with <thead>, <tbody>, and <tfoot> for better semantics
colspan and rowspan merge cells horizontally/vertically
<caption> provides a title for the table
Avoid using tables for layout - use CSS Grid or Flexbox instead

Premium Content

FORMS & INPUTS

Learn to create interactive forms

Intermediate

Module 5: Forms and Input Elements

HTML forms (<form>) allow users to enter data that can be sent to a server. They contain various input elements like text fields, checkboxes, radio buttons, dropdowns, and more, making web pages interactive.

Try It Yourself:

HTML

<h1>Registration Form</h1>

<form action="/submit" method="post" novalidate>
    <fieldset>
        <legend>Personal Information</legend>
        
        <div>
            <label for="name">Full Name:</label>
            <input type="text" id="name" name="name" required 
                   placeholder="Enter your full name" minlength="3">
        </div>
        
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required
                   placeholder="your.email@example.com">
        </div>
        
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required
                   placeholder="Create a password" minlength="8">
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Additional Information</legend>
        
        <div>
            <label>Gender:</label>
            <div>
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">Male</label>
                
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">Female</label>
                
                <input type="radio" id="other" name="gender" value="other">
                <label for="other">Other</label>
            </div>
        </div>
        
        <div>
            <label for="country">Country:</label>
            <select id="country" name="country" required>
                <option value="" disabled selected>Select your country</option>
                <option value="us">United States</option>
                <option value="uk">United Kingdom</option>
                <option value="ca">Canada</option>
                <option value="au">Australia</option>
            </select>
        </div>
        
        <div>
            <label for="bio">Bio:</label>
            <textarea id="bio" name="bio" rows="4" 
                      placeholder="Tell us about yourself...">

Subscribe to newsletter

Live Preview

Key Points:

The <form> element wraps all form controls
action specifies where to send form data
method defines how to send data (GET or POST)
Always use <label> elements for accessibility
Different type attributes create different inputs (text, email, password, etc.)
required makes a field mandatory
placeholder shows example text
Radio buttons share the same name for single selection
Group related fields with <fieldset> and <legend>
Use novalidate to disable browser validation when needed

Premium Content

SEMANTIC HTML

Learn modern HTML5 semantic elements

Intermediate

Module 6: Semantic HTML5 Elements

Semantic HTML elements clearly describe their meaning to both the browser and developer. They improve accessibility, SEO, and make code easier to understand. Modern HTML5 introduced many semantic elements to replace generic <div> elements.

Try It Yourself:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Blog Post Title</h2>
                <p>Published on <time datetime="2023-05-15">May 15, 2023</time> by Author</p>
            </header>
            
            <section>
                <h3>Introduction</h3>
                <p>This is the introduction to my blog post about semantic HTML...</p>
            </section>
            
            <section>
                <h3>Main Content</h3>
                <p>Semantic HTML helps search engines understand your content better...</p>
                
                <figure>
                    <img src="https://via.placeholder.com/600x300" alt="Semantic HTML diagram">
                    <figcaption>Diagram showing semantic HTML structure</figcaption>
                </figure>
                
                <aside>
                    <p>Did you know? Screen readers rely on semantic HTML for navigation.</p>
                </aside>
            </section>
            
            <footer>
                <p>Tags: HTML, Semantic, Web Development</p>
            </footer>
        </article>
        
        <aside>
            <h3>Related Posts</h3>
            <ul>
                <li><a href="#">HTML5 Features</a></li>
                <li><a href="#">Accessibility Tips</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2023 My Website. All rights reserved.</p>
        <address>
            Contact: <a href="mailto:contact@example.com">contact@example.com</a>
        </address>
    </footer>
</body>
</html>

Live Preview

Key Points:

<header> represents introductory content or navigation
<nav> contains major navigation blocks
<main> holds the primary content (only one per page)
<article> encloses self-contained, reusable content
<section> groups thematically related content
<aside> contains tangentially related content
<footer> represents footer content for its nearest ancestor
<figure> and <figcaption> for images/media with captions
<time> for machine-readable dates/times
<address> for contact information
Semantic elements improve accessibility, SEO, and code maintainability

PRACTICE PLAYGROUND

Experiment with what you've learned

Your Coding Playground: Try Your Own HTML

Use this space to experiment with everything you've learned. Try combining different HTML elements and see the results in real-time! This is your sandbox to practice and explore.

HTML

<!-- Your HTML code here -->
<div style="text-align: center; padding: 2rem;">
    <h1 style="color: var(--primary);">Welcome to Your Playground!</h1>
    <p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem;">
        Edit this code and click "Run Code" to see your changes.
        Try creating something amazing with what you've learned!
    </p>

    <div style="background: var(--primary-light); 
                padding: 1.5rem; 
                border-radius: var(--border-radius-md);
                margin: 0 auto;
                max-width: 600px;">
        <h2>Ideas to Try:</h2>
        <ul style="text-align: left; margin-left: 2rem;">
            <li>Create a personal profile page</li>
            <li>Build a responsive navigation menu</li>
            <li>Design a product card with image and details</li>
            <li>Make a contact form with validation</li>
            <li>Experiment with semantic layout</li>
        </ul>
    </div>

    <p style="margin-top: 2rem;">
        Remember to use the <strong>SkillMynte</strong> color scheme:
    </p>
    <div style="display: flex; justify-content: center; gap: 1rem; margin: 1rem 0;">
        <div style="width: 50px; height: 50px; background: var(--primary); 
                    border-radius: 50%;" title="Primary"></div>
        <div style="width: 50px; height: 50px; background: var(--primary-dark); 
                    border-radius: 50%;" title="Primary Dark"></div>
        <div style="width: 50px; height: 50px; background: var(--primary-light); 
                    border-radius: 50%;" title="Primary Light"></div>
    </div>
</div>

Live Preview

Challenge Exercises:

Create a responsive personal portfolio page with:
- Header with navigation
- About section
- Projects showcase
- Contact form
Build a blog post layout using semantic HTML5 elements
Design a product card with:
- Product image
- Title and description
- Price and "Add to Cart" button
Create a responsive navigation menu that works on mobile
Combine all concepts into a complete webpage layout

Tips & Resources:

Use the browser's developer tools (F12) to inspect elements
Try adding inline styles with the style attribute
Experiment with the SkillMynte color variables:
- var(--primary) - Main green color (#04fc42)
- var(--primary-dark) - Darker green (#03c734)
- var(--primary-light) - Light green background (#e0ffe8)
- var(--primary-extra-light) - Very light green (#f5fff7)
For more practice, try recreating popular website components

Unlock Premium SkillMynte Content

Upgrade to SkillMynte Pro for exclusive courses, advanced projects, and personalized learning paths

Premium Courses

Access our entire library of advanced courses and exclusive content

Certification

Earn industry-recognized certificates to showcase your skills

Mentorship

Get personalized guidance from industry experts

Monthly

₦2,500/month

All Premium Courses
Practice Projects
Community Access
Certificates
personal AI inbuilt

Annual Best Value

₦25,000/year

All Premium Courses
Practice Projects
Community Access
Certificates
personal AI inbuilt

Lifetime

₦800,000/once

All Premium Courses
Practice Projects
Community Access
Certificates
personal AI inbuilt